<template>
    <div class="print_form_container">
        <el-form ref="printForm" :rules="rules" :model="formData" label-width="100px">
            <el-form-item label="归属功能" prop="type" v-if="showType">
                <el-select v-model="formData.type" placeholder="请选择归属功能" style="width: 100%;">
                    <template v-for="(item, index) in printTypeList">
                        <el-option :key="index" :label="item.display_text" :value="item.value" />
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item label="模板编码" prop="code">
                <el-input v-model="formData.code" autocomplete="off" placeholder="请输入编码" />
            </el-form-item>
            <el-form-item label="模板名称" prop="name">
                <el-input v-model="formData.name" autocomplete="off" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="排序" prop="sn">
                <el-input v-model="formData.sn" autocomplete="off" placeholder="请输入排序，为空则自动排序" v-int />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    name: "PrintForm",
    props: {
        type: {
            type: String,
            default: null,
        },
        row: {
            type: Object,
            default: null,
        },
        showType: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            rules: {
                type: [
                    { required: true, message: "请选择归属功能", trigger: "blur" },
                ],
                code: [
                    { required: true, message: "请输入编码", trigger: "blur" },
                    {
                        pattern: /^[A-Za-z0-9+-_.]{1,32}$/,
                        message:
                            "最大32位字符，大小写英文、数字或者以下特殊字符（+-_.），不能包含特殊字符",
                    },
                ],
                name: [
                    { required: true, message: "请输入名称", trigger: "blur" },
                    //目前只兼容中文、大小写英文、数字
                    {
                        // pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,50}$/, message:'最大 50 位大小写英文、数字或者其它地区语言字符，不能包含特殊字符'
                        max: 50,
                        message: "最大 50 位字符，内容过长，请删减",
                        trigger: "blur",
                    },
                ],
            },
            formData: {},
        };
    },
    computed: {
        ...mapState('base', ['printTypeList']),
    },
    watch: {
        row: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        async init() {
            const _this = this;
            if (!_this.row) {
                return;
            }
            if (!_this.$utils.isNotEmptyList(_this.printTypeList)) {
                await _this.$store.dispatch('base/initPrintTypeList');
            }
            if (_this.$refs.printForm) {
                _this.$refs.printForm.clearValidate();
            }
            _this.formData = $.extend({}, _this.row);
            if (_this.type === 'copy') {
                _this.formData = {
                    type: _this.row.type,
                    code: `${ _this.row.code }_copy`,
                    name: `${ _this.row.name }_copy`,
                    template_json: _this.row.template_json,
                };
            }
        },
        async confirm() {
            const _this = this;
            let valid = await _this.validateForm('printForm');
            if (valid) {
                let subData = $.extend({}, _this.formData);
                return _this.fetchData(_this.$api.API_SaveBasePrintDesign, subData).then(() => {
                    if (_this.type === 'copy') {
                        _this.$message.success('复制成功！');
                    } else {
                        _this.$message.success('保存成功！');
                    }
                    return true;
                }).catch(() => {
                    return false;
                });
            }
            return valid;
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.print_form_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
